<template>
  <div class="join-us">
    <template v-if="!showRecruitment">
      <div v-if="device==='desktop'" class="dswd-container">
        <joinBanner @setRecruitmentType="setRecruitmentType" />
        <reason />
        <welfare />
        <message />
        <contactinfo />
      </div>
      <div v-if="device==='mobile'||device==='ipad'" class="dswd-m-container">
        <joinBanner @setRecruitmentType="setRecruitmentType" />
        <reason />
        <welfare />
        <message />
        <contactinfo />
      </div>
    </template>
    <Recruitment v-else :job-type.sync="jobType" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Recruitment from '../Recruitment'
import joinBanner from './joinBanner'
import reason from './reason'
import welfare from './welfare'
import message from './message'
import contactinfo from './contactinfo'
export default {
  components: { joinBanner, reason, welfare, message, contactinfo, Recruitment },
  data() {
    return {
      showRecruitment: false,
      jobType: '1'
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  methods: {
    setRecruitmentType(type) {
      this.jobType = type
      this.showRecruitment = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
